<template>
  <el-dialog
    v-model="dialogVisible"
    title="停车费用支付"
    width="400px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div class="payment-content">
      <div class="payment-info">
        <div class="info-item">
          <span class="label">停车场：</span>
          <span>{{ paymentInfo.parkingLotName }}</span>
        </div>
        <div class="info-item">
          <span class="label">停车时长：</span>
          <span>{{ formatDuration(paymentInfo.durationMinutes) }}</span>
        </div>
        <div class="info-item">
          <span class="label">开始时间：</span>
          <span>{{ formatDateTime(paymentInfo.startTime) }}</span>
        </div>
        <div class="info-item">
          <span class="label">结束时间：</span>
          <span>{{ formatDateTime(paymentInfo.endTime) }}</span>
        </div>
        <div class="info-item total">
          <span class="label">应付金额：</span>
          <span class="amount">¥{{ paymentInfo.amount }}</span>
        </div>
      </div>

      <div class="payment-methods">
        <h4>选择支付方式</h4>
        <el-radio-group v-model="selectedMethod">
          <el-radio 
            v-for="method in paymentMethods" 
            :key="method.id"
            :label="method.id"
            class="payment-method"
          >
            <div class="method-info">
              <el-image :src="method.icon" class="method-icon" />
              <span>{{ method.name }}</span>
            </div>
          </el-radio>
        </el-radio-group>
      </div>

      <div class="payment-tips">
        <p v-if="paymentInfo.isOverdue" class="warning">
          * 本次停车已逾期，将扣除{{ paymentInfo.overduePenalty }}信用分
        </p>
        <p class="tip">* 支付完成后请及时驶离停车场</p>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button 
          type="primary" 
          :loading="loading"
          @click="handleConfirm"
        >
          确认支付
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { formatDateTime, formatDuration } from '@/utils/format'
import { getPaymentMethods, createPaymentOrder, confirmPayment } from '@/api/payment'

export default {
  name: 'PaymentDialog',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    paymentInfo: {
      type: Object,
      required: true
    }
  },
  emits: ['update:modelValue', 'success', 'cancel'],
  setup(props, { emit }) {
    const dialogVisible = ref(false)
    const loading = ref(false)
    const paymentMethods = ref([])
    const selectedMethod = ref('')

    const loadPaymentMethods = async () => {
      try {
        const response = await getPaymentMethods()
        paymentMethods.value = response
        if (response.length > 0) {
          selectedMethod.value = response[0].id
        }
      } catch (error) {
        ElMessage.error('获取支付方式失败')
      }
    }

    const handleConfirm = async () => {
      if (!selectedMethod.value) {
        ElMessage.warning('请选择支付方式')
        return
      }

      loading.value = true
      try {
        // 创建支付订单
        const orderResponse = await createPaymentOrder({
          parkingRecordId: props.paymentInfo.id,
          amount: props.paymentInfo.amount,
          method: selectedMethod.value
        })

        // 确认支付
        await confirmPayment(orderResponse.orderId, selectedMethod.value)
        
        ElMessage.success('支付成功')
        emit('success', orderResponse)
        dialogVisible.value = false
      } catch (error) {
        ElMessage.error(error.message || '支付失败')
      } finally {
        loading.value = false
      }
    }

    const handleCancel = () => {
      emit('cancel')
      dialogVisible.value = false
    }

    onMounted(() => {
      loadPaymentMethods()
    })

    // 监听modelValue变化
    watch(() => props.modelValue, (val) => {
      dialogVisible.value = val
    })

    // 监听dialogVisible变化
    watch(dialogVisible, (val) => {
      emit('update:modelValue', val)
    })

    return {
      dialogVisible,
      loading,
      paymentMethods,
      selectedMethod,
      handleConfirm,
      handleCancel,
      formatDateTime,
      formatDuration
    }
  }
}
</script>

<style scoped>
.payment-content {
  padding: 0 20px;
}

.payment-info {
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #666;
}

.info-item.total {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #dcdfe6;
}

.info-item .label {
  color: #909399;
}

.info-item .amount {
  color: #f56c6c;
  font-size: 20px;
  font-weight: bold;
}

.payment-methods {
  margin-bottom: 20px;
}

.payment-methods h4 {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #303133;
}

.payment-method {
  display: block;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.payment-method:hover {
  border-color: #409eff;
}

.method-info {
  display: flex;
  align-items: center;
}

.method-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.payment-tips {
  color: #909399;
  font-size: 14px;
}

.payment-tips .warning {
  color: #f56c6c;
  margin-bottom: 10px;
}

.payment-tips .tip {
  margin: 5px 0;
}

.dialog-footer {
  text-align: right;
}
</style> 